<div id="content_header">
  <h3>Users Management</h3>
</div>

<div class="row">
  <div class="col-md-12">
    <a class="btn btn-primary" ng-click="openItem()"><i class="simple-icon-user-follow"></i> Register a new User</a>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <table class="table table-stripped table-bordered" ng-show="items.length > 0">
      <thead>
        <tr>
          <th>Username</th>
          <th>Staff</th>
          <th>Email</th>
          <th>Role Profile</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr dir-paginate="item in items | orderBy: 'Name' | itemsPerPage: pagesize" total-items="totalItems">
          <!-- <tr ng-repeat="item in items | filter:searchText | orderBy: 'Name'"> -->
          <td>{{ item.Username }}</td>
          <td>{{ item.Staff.Name }}</td>
          <td>{{ item.Email }}</td>
          <td>{{ item.RoleProfile.Name }}</td>
          <td>
            <a class="" href ng-really-message="Are you sure want to delete this data?" ng-really-click="delete('users', item.Id, {collection: items, index: $index})"><i class="simple-icon-trash"></i></a>
            <a class="" ui-sref="^.show({id: item.Id})"><i class="glyphicon glyphicon-edit"></i></a>
          </td>
        </tr>
      </tbody>
    </table>
    <dir-pagination-controls on-page-change="pageChanged(newPageNumber)" template-url="views/templates/dirPagination.tpl.html"></dir-pagination-controls>
  </div>
</div>

<pageslide ps-speed="0.25" ps-auto-close="true" ps-open="formAdd">
<div style="padding:20px">
  <h3>Add User <a href="" ng-click="formAdd = !formAdd"><i class="simple-icon-close"></i></a></h3>
  <hr>

  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="row">
        <form method="POST" role="form" ng-submit="add()">

          <div class="form-group">
            <label for="Staff">
              Staff
            </label>
            <select name="Staff" class="form-control" id="Staff" ng-model="item.Staff.Id" ng-options="staff.Id as staff.Name for staff in staffs" required>
              <option value="" ng-hide="item.Staff.Id">Select a staff.</option>
            </select>
          </div>

          <div class="form-group">
            <label for="Username">
              Username
            </label>
            <input type="text" name="Username" id="Username" class="form-control" min="1" max="" step="" required="required" title="" ng-model="item.Username">
          </div>

          <div class="form-group">
            <label for="Email">
              Email
            </label>
            <input type="text" name="Email" id="Email" class="form-control" min="1" max="" step="" required="required" title="" ng-model="item.Email">
          </div>

          <div class="form-group">
            <label for="Password">
              Password
            </label>
            <input type="password" name="Password" id="Password" class="form-control" min="1" max="" step="" required="required" title="" ng-model="item.Password">
          </div>

          <div class="form-group">
            <label for="ConfirmPassword">
              ConfirmPassword
            </label>
            <input type="password" name="ConfirmPassword" id="ConfirmPassword" class="form-control" min="1" max="" step="" required="required" title="" ng-model="item.ConfirmPassword">
          </div>

          <div class="form-group">
            <label for="RoleProfile">
              Role Profile
            </label>
            <select name="RoleProfile" class="form-control" id="RoleProfile" ng-model="item.RoleProfile.Id" ng-options="role.Id as role.Name for role in role_profiles" required>
              <option value="" ng-hide="item.RoleProfile.Id">Select a role.</option>
            </select>
          </div>

          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
    </div>
    <dir-pagination-controls on-page-change="pageChangedBT(newPageNumber)" template-url="views/templates/dirPagination.tpl.html"></dir-pagination-controls>
    <hr>
  </div>
  <!-- <a href="" class="btn btn-primary" ng-click="openModal(payment)">New Detailed Contact</a> -->
</div>
</pageslide>